<template>
	<div class="login">
		<div class="content">
			<div class="header">
				<img src="../../assets/images/auditSystem/bao.png" alt=""/>
				<div>
					<h6>宝店审核系统2018</h6>
					<p>MOFING AUDIT SYSTEM 2018</p>
				</div>
			</div>
			<div class="username">
				<img src="../../assets/images/auditSystem/user.png" alt=""/>
				<input type="text" v-model.trim="input1" placeholder="用户名"/>
				<img v-if="input1!=''" @click="close" class="close" src="../../assets/images/abao/close.png">
			</div>
			<div class="password" @keydown="login">
				<img src="../../assets/images/auditSystem/pass.png" alt=""/>
				<input type="password" v-model.trim="input2" placeholder="密码"/>
			</div>
			<div class="login_options" @keydown="login">
				<el-checkbox v-model="checked">记住用户名和密码</el-checkbox>
			</div>
			<button @click="goLogin" @keydown="login">登录</button>
		</div>
	</div>
</template>

<script>
	import {setCookie, getCookie, removeCookie, clearCookie} from '@/assets/js/cookie.js'

	export default {
		name: 'login',
		data() {
			return {
				input1: '',
				input2: '',
				checked: false,
			}
		},
		components: {},
		computed: {},
		created() {			
			if(getCookie('auditUserName') && getCookie('auditPassword')){
				this.checked = true;
				this.input1 = getCookie('auditUserName');
				this.input2 = getCookie('auditPassword');
			}
		},
		methods: {
			//清空
			close() {
				this.input1 = '';
			},
			//登录
			goLogin() {
				if (this.input1 == '') {
					this.$alert('请输入用户名', '提示', {confirmButtonText: '确定'});
					return;
				}
				if (this.input2 == '') {
					this.$alert('请输入密码', '提示', {confirmButtonText: '确定'});
					return;
				}
				if (this.checked) {
					setCookie('auditUserName', this.input1);
					setCookie('auditPassword', this.input2);
				}else{
					removeCookie('auditUserName');
					removeCookie('auditPassword');
				}
				//线上账号1458318  71475380
				//测试账号xueyou@qq.com  1234567890
				let obj = {};
				obj.username = this.input1;
				obj.password = this.input2;
				this.$axiosPost('/users/login.json', obj, true).then(res => {
					if (res.code === 200) {
						localStorage.setItem('auditUserName', this.input1);
						localStorage.setItem('auditPassword', this.input2);
						setCookie('UID', res.data.id);
						setCookie('TOKEN', res.data.token);
						this.$router.push('/auditList');
					} else if (res.code === 404) {
						this.$alert(res.message, '提示', {confirmButtonText: '确定'});
					}
				})

			},
			login(val) {
				if (val.keyCode === 13) {
					this.goLogin();
				}
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.login {
		min-height: 100%;
		background: url('../../assets/images/auditSystem/bg.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.content {
			width: 403px;
			height: 360px;
			background: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: left;
			.header {
				display: flex;
				align-items: center;
				img {
					width: 42px;
					height: 47px;
					margin-right: 14px;
				}
				> div {
					h6 {
						font-size: 18px;
						color: #0060c6;
					}
					p {
						font-size: 8px;
						color: #afafaf;
						margin-top: 3px;
					}
				}
			}
			.username, .password {
				position: relative;
				img:nth-of-type(1) {
					width: 19px;
					height: 20px;
					position: absolute;
					left: 15px;
					top: 50%;
					transform: translateY(-50%);
				}
				input {
					width: 338px;
					height: 38px;
					border: 1px solid #e9e9e9;
					font-size: 14px;
					color: #000;
					padding: 0 42px;
					&::placeholder {
						color: #8a8a8a;
					}
				}
				.close {
					position: absolute;
					right: 10px;
					top: 50%;
					transform: translateY(-50%);
					width: 14px;
					height: 14px;
					cursor: pointer;
				}
			}
			.username {
				margin: 31px 0 36px 0;
			}
			.login_options {
				width: 338px;
				display: flex;
				margin: 31px 0 16px 0;
			}
			button {
				width: 338px;
				height: 40px;
				line-height: 40px;
				background: #6296ea;
				font-size: 19px;
				color: #fff;
			}
		}
	}
</style>
